<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 6</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>

</html>
<script>
    // 第二章  Vue 基础语法/2-2 理解 Vue 中的声明周期函数(1)
    // 生命周期函数：在某一个时刻会自动执行的函数
    // const app = Vue.createApp({
    //     data() {
    //         return {
    //             message: 'Hello world'
    //         };
    //     },
    //     // 在实例生成之前自动执行的函数
    //     beforeCreate() {
    //         console.log('beforeCreate');
    //     },
    //     // 在实例生成之后自动执行的函数
    //     created() {
    //         console.log('created');
    //     },
    //     // 在组件内容被渲染到页面之前立即自动执行的函数 
    //     beforeMount() {
    //         console.log('beforeMount');
    //     },
    //     // 在组件内容被渲染到页面之后自动执行的函数
    //     mounted() {
    //         console.log('mounted');
    //     },
    //     template: '<div>{{message}}</div>'
    // });
    // // vm 代表的就是 Vue 应用的根组件
    // const vm = app.mount('#root')



    // 第二章  Vue 基础语法/2-2 理解 Vue 中的声明周期函数(2)
    // 生命周期函数：在某一个时刻会自动执行的函数
    const app = Vue.createApp({
        data() {
            return {
                message: 'Hello world'
            };
        },
        // 在实例生成之前自动执行的函数
        beforeCreate() {
            console.log('beforeCreate');
        },
        // 在实例生成之后自动执行的函数
        created() {
            console.log('created');
        },
        // 在组件内容被渲染到页面之前立即自动执行的函数 
        beforeMount() {
            console.log(document.getElementById('root').innerHTML, "beforeMount");
        },
        // 在组件内容被渲染到页面之后自动执行的函数
        mounted() {
            console.log(document.getElementById('root').innerHTML, "mounted");
        },
        // 当数据发生改变时会立即自动执行的函数
        beforeUpdate() {
            console.log('beforeUpdate');
        },
        // 当数据发生改变，页面重新渲染后，会自动执行的函数
        updated() {
            console.log(document.getElementById('root').innerHTML, "updated");
        },
        // 当Vue应用失效时，自动执行的函数
        beforeUnmount() {
            console.log('beforeUnmount');
        },
        // 当vue应用失效时，且dom完全销毁之后自动执行的函数
        unmounted() {
            console.log(document.getElementById('root').innerHTML, "unmounted");
        },
    });
    // vm 代表的就是 Vue 应用的根组件
    const vm = app.mount('#root')

</script>